<template>
  <div class="index">
    <back />
    <div class="top">
      <img class="top-img" :src="userInfo.avatar" alt="" />
      <div class="bg"></div>
    </div>
    <div class="content">
      <div class="content-a">
        <img class="avatar" :src="userInfo.avatar" alt="" />
        <div class="uname">账号：{{ userInfo.username }}</div>
      </div>
      <div class="content-item">
        资料
        <span>{{ sex }}</span>
        <span>|</span>
        <span>12月8日</span>
        <span>|</span>
        <span>广东茂名</span>
      </div>
      <div class="content-item">
        <span>签名</span>
        <span>{{ userInfo.signatrue }}</span>
      </div>
      <div class="content-item">
        <p>照片</p>
        <div class="img">
          <div class="img-item">
            <img src="../../assets/img/Profile/user/bg3.jpg" alt="" />
          </div>
          <div class="img-item">
            <img src="../../assets/img/Profile/user/bg4.jpg" alt="" />
          </div>
          <div class="img-item">
            <img src="../../assets/img/Profile/user/bg4.jpg" alt="" />
          </div>
        </div>
      </div>
      <div v-if="isUser" class="tab-bar">
        <div class="edit" @click="to_edit">编辑资料</div>
        <div class="send">退出登录</div>
      </div>
      <div v-else class="tab-bar">
        <div class="edit">送礼物</div>
        <div class="send">发信息</div>
      </div>
    </div>
  </div>
</template>

<script>
import Back from "../../components/Back/Back.vue";
export default {
  components: { Back },
  name: "",
  data() {
    return {
      userInfo: {}
    };
  },
  computed: {
    isUser: {
      get() {
        return this._id == this.uid ? true : false;
      },
      set() {}
    },
    sex() {
      return this.userInfo.sex == "man" ? "男" : "女";
    },
    _id() {
      return (
        JSON.parse(localStorage.getItem("userInfo"))._id ||
        this.$store.state.user._id 
        
      );
    },
    uid() {
      return this.$route.params.uid;
    }
  },
  activated() {
    console.log(this.uid, this._id);
    if (this.uid === this._id) {
      this.isUser = true;
    } else {
      this.isUser = false;
    }
    this.$axios({
      url: "users/getuser",
      method: "get",
      // data:data
      params: {
        uid: this.uid
      }
    }).then(res => {
      this.userInfo = res.data;
      console.log(res.data)
    });
  },
  methods: {
    to_edit() {
      if (!this._id) {
        return alert("请先登录");
      } else {
        this.$router.push("/user_edit");
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
nav {
  height: 44px;
  text-align: center;
  line-height: 44px;
}
.top {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 200px;
  background-color: rgba(146, 144, 144, 0.5);
}
.top-img {
  width: 100%;
  background-color: transparent;
}
.content-a {
  display: flex;
  height: 60px;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transform: translate(20%, -50%);
}
.uname {
  height: 40px;
  margin: 8px 0 0 30px;
}
.content-item {
  padding: 10px;
}
.img {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.img-item {
  width: 100%;
  flex: 1;
}
.img-item img {
  width: 100%;
  height: 100%;
}
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 49px;
  width: 100%;
  background-color: #fff;
  z-index: 10;
  display: flex;
}
.send,
.edit {
  flex: 1;
  height: 40px;
  background-color: #eee;
  border-radius: 12px;
  font-size: 18px;
  border: 0;
  text-align: center;
  line-height: 40px;
}
.send {
  background-color: aqua;
  color: wheat;
}
</style>
